// assets/scripts/GuideSystem/GuideView.ts
const { ccclass, property } = cc._decorator;
import { GuideStep } from "./GuideConfig";
import { GuideManager } from "./GuideManager";

@ccclass
export default class GuideView extends cc.Component {
  @property(cc.Label)
  tipLabel: cc.Label = null;

  // ✅ 通过 Inspector 拖入，避免硬编码节点名
  @property(cc.Node)
  maskNode: cc.Node = null; // 对应原来的 "node_black"

  private currentStep: GuideStep | null = null;
  private _targetNode: cc.Node | null = null;
  private _onClickHandler: (event: cc.Event.EventTouch) => void = null;

  // ----------------------------
  // 显示引导
  // ----------------------------

  show(step: GuideStep) {
    console.log(step);
    // 👇 关键：确保是点击型步骤
    if (!("targetNodePath" in step)) {
      cc.warn("[GuideView] show() called with non-click step:", step);
      return;
    }
    // 👇 先清理上一次状态，防止重复绑定
    this.hide();

    if (!step.targetNodePath) {
      cc.warn("[GuideView] Invalid step: missing targetNodePath");
      return;
    }

    const target = cc.find(step.targetNodePath);
    const canvas = this.node.parent; // 假设 GuideView 在 Canvas 下

    if (!target || !this.tipLabel || !canvas) {
      cc.warn(
        `[GuideView] Missing target/canvas/label for: ${step.targetNodePath}`
      );
      this.hide(); // 确保清理
      return;
    }

    this.currentStep = step;
    this._targetNode = target;
    this.tipLabel.string = step.tipText;
    // 显示 UI
    console.log("执行当前一步引导：隐层层显示");
    this.node.active = true;

    // 更新引导框位置和尺寸
    this._updatePositionAndSize(target, canvas);

    this.tipLabel.node.active = true;

    // 绑定点击事件
    this._onClickHandler = this._onTargetClicked.bind(this);
    target.on(cc.Node.EventType.TOUCH_END, this._onClickHandler, this);
  }

  private _updatePositionAndSize(target: cc.Node, canvas: cc.Node) {
    // 获取目标在世界坐标系中的中心点
    const worldPos = target.convertToWorldSpaceAR(cc.v2(0, 0));

    // 转换到 Canvas（即 GuideView 父节点）的局部坐标
    const localPos = canvas.convertToNodeSpaceAR(worldPos);

    // 设置 GuideView 的位置和大小（覆盖整个目标区域）
    this.node.setPosition(localPos);
    this.node.width = target.width;
    this.node.height = target.height;

    // 更新遮罩对齐（假设 maskNode 是子节点且用 Widget 控制）
    if (this.maskNode) {
      const widget = this.maskNode.getComponent(cc.Widget);
      if (widget) {
        widget.updateAlignment();
      }
    }

    // 定位 TipLabel（在目标上方）
    if (this.tipLabel) {
      this.tipLabel.node.setPosition(0, this.node.height / 2 + 40);
    }
  }

  // ----------------------------
  // 隐藏引导
  // ----------------------------

  hide() {
    // 移除事件监听
    if (this._targetNode && this._onClickHandler) {
      this._targetNode.off(
        cc.Node.EventType.TOUCH_END,
        this._onClickHandler,
        this
      );
    }

    // 重置状态
    // this._targetNode = null;
    // this._onClickHandler = null;
    // this.currentStep = null;

    // 隐藏 UI
    this.node.active = false;
    if (this.tipLabel) {
      this.tipLabel.node.active = false;
    }

    // 可选：重置尺寸（避免影响布局）
    this.node.width = 0;
    this.node.height = 0;
  }

  // ----------------------------
  // 事件回调
  // ----------------------------

  private _onTargetClicked(event: cc.Event.EventTouch) {
    event.stopPropagation(); // 防止冒泡干扰其他逻辑
    this.hide();
    console.log("完成当前一步引导：隐层层隐藏");
    if (this.currentStep) {
      GuideManager.instance.onTargetClicked(this.currentStep);
    }
  }

  // ----------------------------
  // 工具方法
  // ----------------------------

  isShowing(): boolean {
    return this.node.active && this.currentStep !== null;
  }
}
